﻿<!DOCTYPE HTML>
<!-- saved from url=(0095)http://it-1074481.view.sitestar.cn/map/baidu.html -->
<!DOCTYPE html PUBLIC "" ""><HTML><HEAD><META content="IE=11.0000" 
http-equiv="X-UA-Compatible">
  <TITLE>Baidu Map</TITLE> 
<META http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<META name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<STYLE type="text/css">
body, html{width: 100%;height: 100%;overflow: hidden;margin:0;}
#allmap {height: 100%;overflow: hidden;}
#result {border-left:1px dotted #999;height:100%;width:295px;position:absolute;top:0px;right:0px;font-size:12px;}
dl,dt,dd,ul,li{    margin:0;    padding:0;    list-style:none;}
dt{    font-size:14px;    font-family:"微软雅黑";    font-weight:bold;    border-bottom:1px dotted #000;    padding:5px 0 5px 5px;    margin:5px 0;}
dd{    padding:5px 0 0 5px;}
li{    line-height:28px;}
</STYLE>
 
<SCRIPT src="baidu_files/api.js" type="text/javascript"></SCRIPT>
 
<SCRIPT src="baidu_files/SearchInfoWindow_min.js" type="text/javascript"></SCRIPT>
 <LINK href="baidu_files/SearchInfoWindow_min.css" rel="stylesheet"> 
<META name="GENERATOR" content="MSHTML 11.00.9600.18739"></HEAD> 
<BODY>
<DIV id="allmap" style="overflow: hidden; position: relative; -ms-zoom: 1;">
<DIV id="map" style="transition:0.5s ease-in-out; height: 100%; -webkit-transition: all 0.5s ease-in-out;"></DIV>
<DIV id="showPanelBtn" style='padding: 10px; transition:0.5s ease-in-out; top: 50%; width: 20px; height: 170px; text-align: center; right: 0px; color: rgb(153, 153, 153); font-family: "微软雅黑"; font-size: 14px; font-weight: bold; margin-top: -95px; display: block; position: absolute; cursor: pointer; -webkit-transition: all 0.5s ease-in-out;'></DIV>
<DIV id="panelWrap" style="transition:0.5s ease-in-out; top: 0px; width: 0px; height: 100%; right: 0px; overflow: auto; position: absolute; -webkit-transition: all 0.5s ease-in-out;">
<DIV style="margin: -100px 0px 0px -10px; left: 50%; top: 50%; width: 20px; height: 200px; color: rgb(153, 153, 153); position: absolute; opacity: 0.5;">此处用于展示结果面板</DIV>
<DIV id="panel" style="position: absolute;"></DIV></DIV></DIV>
<SCRIPT type="text/javascript">

    function $(id){
        return document.getElementById(id);
    }
	
	var wd=0;
	var jd=0;
	
	//116.307852 //40.057031
	
	var myGeo = new BMap.Geocoder();    
    myGeo.getPoint("\u4e0a\u6d77\u6d66\u4e1c\u65b0\u533a\u4e16\u7eaa\u5927\u90531\u53f7", function(point){    
     if (point) {		
		jd=point.lng;
		wd=point.lat;
		var addr="\u4e0a\u6d77\u6d66\u4e1c\u65b0\u533a\u4e16\u7eaa\u5927\u90531\u53f7";
		document.getElementById('showPanelBtn').style.backgroundColor="#fff";
		document.getElementById('showPanelBtn').innerHTML="显示检索结果面板<br/>&lt;";
		showmap(jd,wd,addr);		
     }else{
		alert('地址无法查询');
	 }      
    }, "");   
	
	function showmap(jd,wd,addr){
		var map = new BMap.Map('map');
		var poi = new BMap.Point(jd,wd);
		map.centerAndZoom(poi, 19);
		map.enableScrollWheelZoom();
		Propertys(map);
				showmark(map,poi,addr);
			}
	
	function showmark(map,poi,addr){
		var content = '<div style="margin:0;line-height:20px;padding:2px;">地铁2号线到陆家嘴站</div>';
		//创建检索信息窗口对象
		var searchInfoWindow = null;
		searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
				title  : addr,      //标题
				width  : 100,             //宽度
				height : 48,              //高度
				panel  : "panel",         //检索结果面板
				enableAutoPan : true,     //自动平移
								enableSendToPhone: false,
					 
				searchTypes   :[
					BMAPLIB_TAB_SEARCH,   //周边检索
					BMAPLIB_TAB_TO_HERE,  //到这里去
					BMAPLIB_TAB_FROM_HERE //从这里出发
				]
		});
		var marker = new BMap.Marker(poi); //创建marker对象
		marker.setAnimation(BMAP_ANIMATION_BOUNCE);				searchInfoWindow.open(marker);
		marker.addEventListener("click", function(e){
			searchInfoWindow.open(marker);
		})
				map.addOverlay(marker); //在地图中添加marker	 
				var opts = {
		  position : poi,    // 指定文本标注所在的地理位置
		  offset   : new BMap.Size(3, 3)    //设置文本偏移量
		 
		}
		var label = new BMap.Label("上海东方明珠", opts);  // 创建文本标注对象
			label.setStyle({
				 backgroundColor : "#fff",
				 borderColor : "#808080",
				 color : "#333",
				 fontSize : "12px",
				 height : "20px",
				 paddingLeft:"10px",
				 paddingRight:"10px",
				 lineHeight : "20px",
				 fontFamily:"微软雅黑"
			 });
		map.addOverlay(label);  
				
   }
 
    var isPanelShow = false;
    //显示结果面板动作
    $("showPanelBtn").onclick = function(){
        if (isPanelShow == false) {
            isPanelShow = true;
            $("showPanelBtn").style.right = "300px";
            $("panelWrap").style.width = "300px";
            $("map").style.marginRight = "300px";
            $("showPanelBtn").innerHTML = "隐藏检索结果面板<br/>>";
        } else {
            isPanelShow = false;
            $("showPanelBtn").style.right = "0px";
            $("panelWrap").style.width = "0px";
            $("map").style.marginRight = "0px";
            $("showPanelBtn").innerHTML = "显示检索结果面板<br/><";
        }
    }
	
	function Propertys(maps){
		//explain:三维地图加载百度内部js出错,暂时取消三维地图控件,author:fpf
		 maps.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP]})); 		 maps.addControl(new BMap.ScaleControl()); 		 maps.addControl(new BMap.NavigationControl());maps.enableScrollWheelZoom();maps.addControl(new BMap.OverviewMapControl()); 		//maps.setCurrentCity("北京"); 
	}
</SCRIPT>
 </BODY></HTML>
